<template>
  <div>
    <div class="contain">
      <!-- 表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="120px"
      >
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="商户ID/名称:">
              <el-input
                v-model="formInline.controlNo"
                placeholder="商户ID/名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单号:">
              <el-input v-model="formInline.name" placeholder="订单号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配送方式:">
              <el-select v-model="formInline.state" placeholder="配送方式">
                <el-option label="全部" value="全部" />
                <el-option label="到店自提" value="到店自提" />
                <el-option label="同城配送" value="同城配送" />
                <el-option label="跨城配送" value="跨城配送" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item label="手机号:">
              <el-input v-model="formInline.odd" placeholder="手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="下单日期:">
              <el-date-picker
                v-model="formInline.withdrawaltime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button
                size="medium"
                class="searchs"
                @click="search"
              >查询</el-button>
              <el-button size="medium" @click="resetting">重置</el-button>
            </template>
          </el-col>
        </el-row>
      </el-form>
      <!--/ 表单 -->
    </div>
    <div class="btn">
      <el-button-group>
        <el-button>全部</el-button>
        <el-button>待支付</el-button>
        <el-button>待自提</el-button>
        <el-button>待配送</el-button>
        <el-button>待发货</el-button>
        <el-button>已收货</el-button>
        <el-button>售后退款</el-button>
        <el-button>已取消</el-button>
      </el-button-group>
    </div>
    <template>
      <el-card class="hr-block">
        <el-table
          :data="list"
          :default-sort="{ prop: 'date', order: 'descending' }"
          max-height="500"
        >
          <el-table-column label="商户ID" prop="type" />
          <el-table-column label="商户名称" prop="controlNo" />
          <el-table-column label="订单号" prop="name" />
          <el-table-column label="商品列表" prop="odd" />
          <el-table-column label="下单时间" prop="time">
            <template slot-scope="scope">
              <span>{{ scope.row.time | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单总金额" prop="money">
            <template slot-scope="{ row }">
              <span>{{ row.money + ' 元' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="配送方式" prop="state" />

          <el-table-column label="收货地址/提货人" prop="remarks" />
          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.prevent="deleteRow(scope.$index, tableData)"
              >
                确认提货
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.native.prevent="deleteRow(scope.$index, tableData)"
              >
                查看订单
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.native.prevent="deleteRow(scope.$index, tableData)"
              >
                取消订单
              </el-button>
            </template>
          </el-table-column></el-table>
        <!-- 分页组件 -->
        <div class="block">
          <el-row
            type="flex"
            align="middle"
            justify="center"
            style="height: 60px"
          >
            <el-pagination
              background
              :page-sizes="[2, 4, 8, 10]"
              :current-page.sync="page.page"
              :page-size="page.pageSize"
              layout="total, prev, pager, next"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Nnn',
  components: {},
  props: {},
  data() {
    return {
      formInline: {
        controlNo: '',
        name: '',
        state: '',
        odd: '',
        withdrawaltime: ''
      },
      count: 0,
      page: {
        page: 1, // 数据总数
        total: 0, // 当前在第几页
        pageSize: 4, // 每页显示多少条
        name: ''
      },
      list: [
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        },
        {
          type: '1574888',
          controlNo: '美宜佳-保利店',
          name: '1574888',
          odd: '猪肉500g   x1',
          time: '2020-03-01 10:11:36',
          money: '1200',
          state: '到店自提',
          remarks: ' 提货人：袁子灰    联系电话：188xxxxxxxx'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: { search() {}, resetting() {} }
}
</script>

<style scoped>
.contain {
  margin: 8px;
  border-radius: 4px;
  border: 1px solid #f90;
  padding: 20px;
}
.btn {
  padding: 8px;
}
</style>
